import React from 'react'
import { Checkbox as AntdCheckbox } from 'antd'
import { connect, mapProps } from '@formily/react'
import { observer } from '@formily/reactive-react'

export interface SingleCheckBoxProps {
  value?: boolean
  onChange?: (checked: boolean) => void
  children?: React.ReactNode | string
  disabled?: boolean
  autoFocus?: boolean
}

export const Com: React.FC<SingleCheckBoxProps> = observer((props) => {
  const { value, onChange, children, ...restProps } = props

  return (
    <AntdCheckbox
      checked={value}
      onChange={(e) => onChange?.(e.target.checked)}
      {...restProps}
    >
      {children}
    </AntdCheckbox>
  )
})

export const SingleCheckBox = connect(
  Com,
  mapProps({
    disabled: 'disabled',
  })
)
